<template>
	<div class="cmt-container">
		<!-- 注意！！！该组件被调用的话需要传递一个id，否则不行 -->
		<h3>发表评论</h3>
		<hr>
		<textarea placeholder="最多吐槽120字" maxlength="120" v-model="msg"></textarea>
		<mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
		<!-- 评论内容区 -->
		<div class="cmt-list">
			<div class="cmt-item" v-for="(item,i) in comments" :key="item.add_time">
				<div class="cmt-title">
					第{{i+1}}楼&nbsp;&nbsp;{{item.username}}&nbsp;&nbsp;发表时间:{{item.add_time|dateFormat}}
					</div>
				<div class="cmt-body">
					{{item.content}}
					</div>
			</div>
			
		</div>
		<mt-button type="danger" size="large" plain @click="addPage">加载更多</mt-button>
	</div>
</template>

<script>
	// 引入toast模块
	import {Toast} from 'mint-ui'
	export default{
		data(){
			return{
				pageindex:1,  //默认页码为1
				comments:[],//所有的评论数据
				msg:'',//评论的内容，默认为空
			}
		},
		created(){
			this.getComments();
		},
		methods:{
			getComments:function(){
				this.axios.post('http://localhost:3000/api/getcomments',
				{id:this.id,pageindex:this.pageindex})
				.then((response) => {
					// console.log("23432");
					if(response.data.status===0){
						for(var i=0;i<response.data.data.length;i++){
							// 直接在数组后面添加
							this.comments.push(
							{
							username:response.data.data[i].username,
							add_time:response.data.data[i].add_time,
							content:response.data.data[i].content
							})
							console.log(this.comments)
						}
					}else{
						Toast('评论加载失败')
					}
				})
			},
			// 页码加一
			addPage:function(){
				this.pageindex++;
				// 然后把下一页内容加载到评论区域
				this.getComments();
			},
			// 提交评论
			postComment:function(){
				// 判断评论内容是否为空，使用trim去掉左右的空格
				if(this.msg.trim().length===0){
					return Toast("评论内容不能为空")
				}else{
					// 把评论内容添加到服务器
					this.axios.post('http://localhost:3000/api/addcomments',
					{id:this.id,content:this.msg,pageindex:1,username:'匿名用户'})
					.then((response) => {
						if(response.data.status==0){
							// 把评论内容添加到本地数组中
							// 拼接出一个评论对象,但是这样其实是有bug的，因为时间可能存在区别
							var com={username:'匿名用户',add_time:new Date(),content:this.msg};
							this.comments.unshift(com);
							this.msg='';
						}else{
							console.log('评论失败')
						}
					})
					
				}
				
			}
		},
		// 接收父组件传来的数据
		props:["id"]
	}
</script>

<style lang="scss" scoped>
	.cmt-container{
		h3{
			font-size: 18px;
		}
		textarea{
			font-size: 14px;
			height: 85px;
			margin: 0;
		}
		.cmt-list{
			margin: 5px 0;
			.cmt-title{
				font-size: 13px;
				line-height: 30px;
				background-color: #ccc;
			}
			.cmt-body{
				line-height: 35px;
				// 缩进
				text-indent: 2em;
				font-size: 16px;
			}
		}
	}
</style>
